<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="txt/css">
    </style>
  </head>
  <body onload="createCode();getsalary()">
    <form action="resource/passworrd.html" onsubmit="return validateCode()" method="get">
      <div>
        <label for="tel">手机号码：</label>
        <input
          type="text"
          id="tel"
          name="tel"
          title="11位手机号"
          placeholder="11位手机号"
        />
        <span style="color: red;">必填</span>
      </div>
      <div>
        <label for="pwd">创建密码：</label>
        <input
          type="password"
          id="pwd"
          name="pwd"
          title="密码"
          placeholder="8位密码"
          maxlength="8"
        />
        <span style="color: red;" id="test">必填</span>
      </div>
      <div>
        <label for="email">注册邮箱：</label>
        <input
          type="text"
          id="email"
          name="email"
          title="邮箱"
          placeholder="例如:wustzz@sina.com"
        />
        <span style="color: red;">必填</span>
      </div>
      <div>
      <div>
          <label for="inputCode">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</label>
          <input type="text" id="inputCode" />
          <label id="checkCode"
                onclick="createCode()"
                title="点击刷新" 
                style="background-color:rgb(157,98,253);
                      padding-left: 5px;
                      padding-right:5px;
                      color: rgb(11,17,252);
                      letter-spacing:2px;"
                onselect="return false"
                for="inputCode"
                class="code"
                      >
            </label>
          <a href="#" onclick="createCode()"
            ><img
              src="resource/arrow_03.png"
              alt="刷新验证码"
              title="刷新验证码"
              height="20px"
              width="20px"
              style="vertical-align:text-top;"
          /></a>
      </div>
      <div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
          <input type="radio" name="sex" value="male">男
          <input type="radio" name="sex" value="femanl">女
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：
        <input type="date">
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：
        <input type="text">
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：
        <select id="place">
          <option value="0" selected="selected">湖北省</option>
          <option value="1">懒得做了</option>
        </select>
        <select id="place2">
          <option value="0" selected="selected">武汉市</option>
          <option value="1">懒得做了</option>
        </select>
      </div>
      <div>
        个人学历：
        <select>
          <option value="0" selected="selected">本科</option>
          <option value="1">懒得做了</option>
        </select>
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：
        <input type="range" id="salary" min="0" max="10000" step="100" value="5000">
        <span id="xinshui"></span>
      </div>
      <div>
        个人爱好：
        <input type="checkbox" name="like" value="sing">唱歌
        <input type="checkbox" name="like" value="run">跑步
        <input type="checkbox" name="like" value="swim">游泳
      </div>
      <div>
        图片预览：
        <div 
          id="test-image-preview" 
          class="test-image-preview"
          style="border: 1px solid silver;
                width: 250px; height: 100px;
                background-repeat: no-repeat; 
                background-position: center;
                position:absolute;
                left: 90px;"
              >
        </div>
        <span><input type="file" id="test-image-file" name="img"></sp>
        <span id="test-file-info"></span>
      </div>
      <div style="padding-top: 110px;">
        个人简介：
        <textarea name="jianjie" id="jianjie" cols="30" rows="10" style="text-align:left ;"></textarea>
      </div>

      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
    </form>
    <script type="text/javascript">

      var code;
      function createCode() {
        code = "4";
        var codeLength = 3;
        var checkCode = document.getElementById("checkCode");
        var codeChars = new Array(
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
          "g",
          "h",
          "i",
          "j",
          "k",
          "l",
          "m",
          "n",
          "o",
          "p",
          "q",
          "r",
          "s",
          "t",
          "u",
          "v",
          "w",
          "x",
          "y",
          "z",
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z"
        );
        for (var i = 0; i < codeLength; i++) {
          var charNum = Math.floor(Math.random() * 52);
          code += codeChars[charNum];
        }
        if (checkCode) {
          checkCode.className = "code";
          checkCode.innerHTML = code;
        }
      }
      function validateCode() {
        var inputCode = document.getElementById("inputCode").value;
        if (inputCode.length <= 0) {
          alert("请输入验证码！");
          createCode();
          return false;
        } else if (inputCode.toUpperCase() != code.toUpperCase()) {
          alert("验证码输入有误！");
          createCode();
          return false;
        } else {
          return true;
        }
      }     
    </script>
    <script>
      var salary = document.getElementById("xinshui");
      function getsalary() { 
        salary.innerHTML = document.getElementById("salary").value;
      }
      document.getElementById("salary").onchange = function () { 
        salary.innerHTML = this.value;
      }
    </script>
    <script>
      var fileInput = document.getElementById('test-image-file');
      var info = document.getElementById('test-file-info');
      var preview = document.getElementById('test-image-preview'); 
      fileInput.addEventListener('change', function () { // 监听change事件
      preview.style.backgroundImage = ''; // 清除背景图片
      if (!fileInput.value) {
      info.innerHTML = '没有选择文件';
      return;
      } 
      var file = fileInput.files[0]; // 获取File引用
      // 获取File信息:
      info.innerHTML = '已经选择文件';
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      alert('不是有效的图片文件!');
      return;
      } 
      var reader = new FileReader(); // 读取文件
      reader.onload = function (e) { // 发起一个异步操作来读取文件内容
      var data = e.target.result; // data串形如： '...(base64编码)...' 
      preview.style.backgroundImage = 'url(' + data + ')';
      }; 
      reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
  </body>
</html>
